<template>
	<view>
		<view class="label-item u-flex u-border-bottom">
			<view class="label-item-left u-flex-1 ">
				<text class="text" :class="[RequiredClass]">
					{{title}}
				</text>
			</view>
			<view class="label-item-right u-flex-4  u-row-right u-flex">
				<view v-if="showPhoto">
					<PhotoButton @photo="onPhoto"></PhotoButton>

				</view>
				<view class="u-m-l-30" v-if="showVideo">

					<VideoButton @video="onVideo"></VideoButton>
				</view>
				<view class="u-m-l-30" v-if="showPpload">

					<UploadButton @upload="onUpLoad"></UploadButton>
				</view>
			</view>
		</view>
		<view class="">
			<ul class="file-wrapper">
				<li class="file-item u-border-bottom" v-for="(item,index) in attachment " :key="item.timestamp">
					<view class="file-item-left">
						<u-icon color="#409EFF" size="24" :name="item.icon"></u-icon>
						<span @click="$open(item.file.url)" class="file-item-left__text">{{item.file.fileName | rightEllipsis }}</span>

					</view>
					<view class="file-item-right">
						<u-icon name="close" color="#98A5B3" size="18" @click="onRemoveAttachment(index)">
						</u-icon>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import PhotoButton from '@/components/button/photo.vue'
	import VideoButton from '@/components/button/video.vue'
	import UploadButton from '@/components/button/upload.vue'
	export default {
		components: {
			PhotoButton,
			VideoButton,
			UploadButton,
		},
		data() {
			return {
				attachment: []
			}
		},
		props: {
			showPhoto: {
				type: Boolean,
				default: true
			},
			showVideo: {
				type: Boolean,
				default: true
			},
			showPpload: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '附件'
			},
			value: {
				type: String,
				default: '文本'
			},
			required: Boolean,
		},

		watch: {
			value(val) {
				if (val == '[]' || val == '' || !val) {
					this.attachment = []
				}
			},
			attachment(newVal, oldVal) {
				console.log(newVal, 'newVal');
				let val = newVal.map((e) => {
					return {
						url: e.file.url,
						name: e.file.fileName
					}
				})
				this.$emit('input', JSON.stringify(val))

			}
		},
		methods: {
			onPhoto(data) {
				this.attachment.push(data)
			},
			onVideo(data) {
				this.attachment.push(data)
			},

			onUpLoad(data) {
				this.attachment.push(data)
			},
			onRemoveAttachment(index) {
				this.attachment.splice(index, 1)
			},
		},
		computed: {
			RequiredClass() {
				return this.required ? 'required' : ''
			},

		}
	}
</script>

<style lang="scss" scoped>
	.label {
		&-item {
			display: flex;
			flex-direction: row;
			padding: 18rpx 0;

			&-left {
				position: relative;

				>.text {
					font-size: 28rpx;
					color: #98A5B3;
				}

				>.required {

					&::after {
						content: "*";
						color: #F56C6C;
						position: absolute;
						top: -6rpx;
						left: -16rpx;
					}
				}
			}

			&-right {}
		}
	}

	.file {

		&-item {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-left {
				width: 95%;

				&__text {
					font-weight: 400;
					font-size: 28rpx;
					display: inline-block;
					color: #409EFF;
					margin-left: 10rpx;

				}
			}

			&-right {
				width: 5%;
			}
		}
	}
</style>
